<template>
  <div class="main">
    <div class="header">
      <ul class="data">
        <li>司机账号：<el-input v-model="params.account" style="width:60%" /></li>
        <li>司机姓名：<el-input v-model="params.name" style="width:60%" /></li>
        <li>司机手机号：<el-input v-model="params.phone" style="width:60%" /></li>
      </ul>
      <ul class="data">
        <li>所属机构：
          <!-- <el-input v-model="data.agentId" style="width:70%" /> -->
          <el-select v-model="agency" placeholder="请选择所属机构">
            <el-option style="height:auto" value="">
              <el-tree :data="options" :props="defaultProps" @node-click="handleNodeClick" />
            </el-option>
          </el-select>
        </li>
        <li>
          <el-button style="background-color: #e15536" @click="search">搜索</el-button>
          <el-button @click="reset">重置</el-button>

        </li>
        <li />
      </ul>
    </div>
    <div class="body">
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
      >
        <el-table-column
          prop="xuhao"
          label="序号"
          width="120"
        />
        <el-table-column
          prop="account"
          label="司机账号"
        />
        <el-table-column
          prop="name"
          label="司机姓名"
        />
        <el-table-column
          prop="mobile"
          label="司机手机号"
        />
        <el-table-column
          prop="truck.licensePlate"
          label="关联车辆"
        />
        <el-table-column
          prop="agency.name"
          label="所属机构"
        />
        <el-table-column
          prop="workStatus"
          label="工作状态"
        >
          <template v-slot="{ row }">
            <span v-if="row.workStatus === 1">上班</span>
            <span v-else-if="row.workStatus === 0"><span style="color: red">·</span>休息</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="120"
        >
          <template v-slot="{ row }">
            <el-button size="mini" type="text" @click="$router.push(`/driverdata/${row.userId}`)">查看</el-button>
            <el-button size="mini" type="text" @click="orshow(row)">配置车辆</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="params.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <el-dialog
        title="车辆配置"
        :visible.sync="show"
        width="30%"
      >
        <div class="carp">配置车辆需满足以下条件：</div>
        <div class="carp mcar">
          <p><span>1</span>司机信息已完善</p>
          <p><span>2</span>司机已设置排班</p>
        </div>
        <div class="carp"><p><span>3</span>司机绑定车辆未在启用状态</p></div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="show = false">取 消</el-button>
          <el-button type="primary" @click=" show = false;carshow=true">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        title="配置车辆"
        :visible.sync="carshow"
        width="50%"
      >
        <div class="car">
          <div class="carheader">
            <div>
              <span>司机编号：{{ row.id }}</span>
              <span>司机名称：{{ row.name }}</span>
            </div>
            <div>
              <span>司机电话：{{ row.mobile }}</span>
              <span>所属机构： {{ row.agency.name }}</span>
            </div>
          </div>
          <div class="carmiddle">
            配置车辆:  <el-select v-model="choosecar" filterable :placeholder="choosecar" @change="choose">
              <el-option
                v-for="item in stopcar"
                :key="item.id"
                :label="item.licensePlate"
                :value="item.id"
              />
            </el-select>
          </div>
          <el-table
            :data="onecardata"
            style="width: 100%"
          >
            <el-table-column
              prop="licensePlate"
              label="车牌号"
              width="180"
            />
            <el-table-column
              prop="runStatus"
              label="车辆状态"
              width="180"
            >
              <template v-slot="{ row }">
                <span v-if="row.workStatus === 1"><span style="color: green">·</span>启用</span>
                <span v-else-if="row.workStatus === 0"><span style="color: red">·</span>停用</span>
                <span v-else>无</span>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="180"
            >
              <template v-slot="{ row }">
                <el-button size="mini" type="text" @click="$router.push(`/onecardata/${row.id}`)">查看</el-button>
                <span style="margin:0 10px">|</span>
                <el-popconfirm title="确认删除该行数据吗？" @onConfirm="confirmDel(row.id)">
                  <el-button slot="reference" size="mini" type="text" style="color:orange">删除</el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="carshow = false">取 消</el-button>

          <el-button type="primary">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div class="footer">
      <span>江苏传智播客教育科技股份有限公司</span>
      <span> 版权所有Copyright 2006-2022 All Rights Reserved</span>
      <span> 苏ICP备16007882号-11</span>
    </div>
  </div>

</template>

<script>
import { getJigou } from '@/api/jigou'
import { dataid } from '@/utils/index'
import { getDrivers, getStopcar, getOnecardata, delOnecar } from '@/api/driver'
export default {
  data() {
    return {
      onecardata: [],
      onecarid: '',
      choosecar: '',
      stopcar: [],
      carData: [],
      row: { agency: '' },
      show: false,
      carshow: false,
      options: [
      ],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      state: '',
      tableData: [],
      total: 10,
      agency: '',
      params: {
        account: '',
        agentId: '',
        name: '',
        phone: '',
        workStatus: '3',
        page: 1,
        pageSize: 10
      }
    }
  },
  mounted() {
  },
  created() {
    this.getDrivers()
    this.getJigou()

    this.getStopcar()
  },
  methods: {

    async  confirmDel(id) {
      // console.log(id)
      this.$message.success('删除成功')
      const res = await delOnecar(id)
      console.log(res)
      this.$message.success('删除成功')
    },
    async getOnecardata() {
      const res = await getOnecardata(this.onecarid)
      console.log(res.data)
      this.onecardata = res.data
      this.onecardata = [{ licensePlate: this.onecardata.licensePlate, workStatus: this.onecardata.workStatus, id: this.onecardata.id }]
    },
    async  getStopcar() {
      const res = await getStopcar()
      console.log(res.data)
      this.stopcar = res.data
    },
    sure() {

    },
    choose(carid) {
      // console.log(carid)
      // this.onecarid = carid
      this.getOnecardata()
    },
    // 车辆配置提醒
    orshow(data) {
      this.show = true
      this.row = data
      console.log(this.row)
      this.choosecar = data.truck.licensePlate
      this.onecarid = data.truck.id
      this.getOnecardata()
    },
    // 获取树状机构信息
    async getJigou() {
      const res = await getJigou()
      console.log(JSON.parse(res.data))
      this.options = JSON.parse(res.data)
    },
    async search() {
      this.params.page = 1
      await this.getDrivers()
      this.reset()
      this.agency = ''
    },
    // 下拉树形图操作
    handleNodeClick(data) {
      console.log(data)
      this.params.agencyId = data.id
      this.agency = data.name
    },
    // 换每页几条
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.params.page = 1
      console.log(this.params.page)
      this.params.pageSize = val
      this.getDrivers()
    },
    // 换页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.params.page = val
      this.getDrivers()
    },
    // 获取司机分页数据
    async getDrivers() {
      const res = await getDrivers(this.params)
      console.log(res.data)
      this.total = Number(res.data.counts)
      this.tableData = dataid(res.data.items)
    },

    // 清除表单
    reset() {
      // console.log(1)
      this.params = {
        account: '',
        agentId: '',
        name: '',
        phone: '',
        workStatus: '',
        page: 1,
        pageSize: 10
      }
    }
  }
}
</script>

<style lang="scss" scoped>
li{

  list-style: none;

}
.main{
background-color: #f3f4f7;
padding: 0 20px;
.header{
 padding:  20px 30px 0 30px;
  background-color: #fff;
border-radius: 5px;
.data{
  margin: 0;
  padding: 0;
  padding-bottom:20px ;
  display: flex;
  justify-content: space-between;
  li{
    width: 30%;
    line-height: 40px;
  display: flex;
  align-content: center;
  }
}
}
.body{
   padding:  20px 30px 0 30px;
   background-color: #fff;
.el-pagination{
  padding:20px 0 20px 0 ;
display: flex;
justify-content: center;
          }
         .carp{
         display: flex;
         justify-content: space-between;
         margin: 0px 20px;
         p{
         margin: 0;
         span{
          display:inline-block;
          width: 15px;
          height: 15px;
          margin-right: 5px;
          text-align: center;
          line-height: 15px;
          border: 1px solid grey;
          border-radius: 50%;
         }
         }
       }
        .mcar{
         margin: 10px 20px ;
          }
          .car{
            .carheader{
              padding: 0 40px;
              div{
                display: flex;
                span{
                  flex: 1;
                  margin-top: 10px;
                }
              }
            }
            .carmiddle{
              padding-top: 20px;

            }
          }
   }
   .footer{
display: flex;
justify-content: center;
margin-top:20px;
padding-bottom: 20px;
span{
padding:0 10px;
color: #bac0d6;
}
   }
}
.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}
</style>>

